<template>
	<div class="bg">
		<view class="content">
			<uni-nav-bar style="opacity: 0" :border="false" :background-color="'transparent'" :statusBar="true" title=" "></uni-nav-bar>
			<view class="top-bg">
				<image class="logo" :src="shopInfo.shopLogo" mode="fill"></image>
			</view>

			<view class="box header-brand">
				<view class="top-brand">
					<view class="top-brand-box flex justify-between">
						<view class="top-brand-info">
							<view class="top-brand-info__name">{{ shopInfo.shopName }}</view>
						</view>
						<image class="logo" :src="shopInfo.shopLogo" mode="aspectFill"></image>
					</view>
					<div class="top-brand-address">
						<view class="flex align-center justify-between">
							<view>
								<view class="top-brand-info__desc">{{ shopInfo.shopAddress }}</view>

								<view class="top-brand-info__distance" v-if="shopInfo.distance !== 0" @click="handelToSubNav">
									{{ shopInfo.distance ? '距' : '' }}{{ shopInfo.distance || '距离获取中...' }}km
								</view>
								<view class="top-brand-info__location" v-else @click="modalUserLocation">
									<view class="top-brand-info__location--text">授权定位</view>
								</view>
							</view>

							<view class="top-brand-positon" v-if="shopInfo.distance !== 0">
								<view class="top-brand-info__positon" @click="handelToSubNav">
									<image class="icon" src="@/static/images/index/index-brand-positon.png" mode="aspectFit"></image>
								</view>
								<view class="top-brand-info__navation">导航</view>
							</view>
						</view>
					</div>
					<view class="top-brand-foot flex">
						<view class="top-brand-foot__item flex">
							<image class="icon" src="@/static/images/index/icon-time@2x.png" mode="aspectFit"></image>
							<view class="text">24小时营业</view>
						</view>
						<view class="top-brand-foot__item flex">
							<image class="icon" src="@/static/images/index/icon-tips@2x.png" mode="aspectFit"></image>
							<view class="text">油品好，计量足</view>
						</view>
					</view>
				</view>

				<!-- 用户信息 -->
				<view class="userinfo-box">
					<view @click="handleToInfo">
						<image v-if="userInfo.phone" class="portrait" :src="userDetail.avatarW" mode="aspectFill"></image>
						<image v-else class="portrait-old" :src="userDetail.avatar" mode="aspectFill"></image>
					</view>
					<!-- 未登录 -->
					<view class="userinfo-box-right">
						<view v-if="userInfo.phone" class="no-login">
							<view class="name">
								<text class="nickname">{{ userInfo.phone }}</text>
								<image class="icon-member-level" :src="`../static/images/index/icon-member-leve${userInfo.vipTypeId}@2x.png`" mode="aspectFill"></image>
							</view>
							<!-- <view class="phone">{{ userInfo.phone }}</view> -->
							<view class="desc">
								<view class="item" v-for="(item, index) in userDetail.todayPetrolList" :key="index">
									<view>
										{{ item.productName }}{{ item.productCategoryName }}
										<text class="num">{{ item.price }}元</text>
										/升
									</view>
								</view>
							</view>
						</view>
						<view v-else class="no-login">
							<view class="name">
								<button class="is-login" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"><text class="nickname">请点击授权获取优惠折扣！</text></button>
							</view>
							<view class="desc">授权登录，一键加油</view>
						</view>
					</view>
				</view>

				<!-- 入口 -->

				<view class="nav">
					<button v-if="!userInfo.phone" class="is-login point-login" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></button>
					<view class="nav-left" @click="handelToNav('recharge')">
						<image class="bg" src="../static/images/index/index-block-bg@2x.png" mode=""></image>
						<view class="nav-box">
							<image class="icon icon-recharge" src="../static/images/index/icon-recharge@2x.png" mode="aspectFill"></image>
							<view class="link">
								<view class="title">
									<view class="label">您的余额：</view>
									<view class="num">{{ userDetail.balance || 0 }}元</view>

									<view class="racharge-btn flex align-center">
										<image class="racharge-btn-icon" src="../static/images/index/index-racharge-btn@2x.png" mode="aspectFill"></image>
										<view class="racharge-btn-text flex align-center">
											<view class="left">
												<view>多充多送</view>
												<view>无门槛加油抵送</view>
											</view>
											<view class="right flex align-center">
												<view>立即充值</view>
												<uni-icons class="link-forward" type="forward" size="14" color="#ffffff"></uni-icons>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="oil-box">
				<image class="oil-box-btn" src="../static/images/index/oil-bg.png" mode="widthFix"></image>
				<button v-if="!userInfo.phone" class="is-login point-login" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></button>
				<view class="oil-box-content" @click="handleToTab">
					<image class="icon" src="../static/images/index/oil-icon@2x.png" mode=""></image>
					<view class="text">一键加油</view>
				</view>
			</view>
			<!-- <image class="logo" src="@/static/logo200.png"></image>
    <view class="text-area"><text class="title">山东加油站</text></view> -->
		</view>
	</div>
</template>

<script>
import { memberProfile, memberDetail } from '@/api/member.js';
import { appletPhoneAuth } from '@/api/login.js';
import { shopDetail } from '@/api/shop.js';
import { mapState, mapMutations } from 'vuex';

export default {
	data() {
		return {
			userInfo: {},
			shopInfo: {},
			userDetail: {}
		};
	},
	onShow() {
		uni.showTabBar();
		this.getShopDetail();
		const token = uni.getStorageInfoSync('token');
		this.fetchMemberProfile(token);
		this.getMemberDetail();
	},
	onShareAppMessage(res) {
		console.log(res);
		return {
			title: '山东石化新庄958站',
			path: '/pages/index',
			desc: '山东省临沂市费县S231费县新庄镇人民政府西侧约150米',
			content: '山东石化新庄'
		};
	},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: '山东石化新庄958站',
			path: '/pages/index',
			imageUrl: 'https://xrmwl.com/glht/profile/notice/cover/0/2022/06/18/ad1b1c3cbabde50a85f8da83c9c7b614.png'
		};
	},
	methods: {
		// 请求手机号
		getPhoneNumber(e) {
			console.log(e);
			this.$modal.loading('登录中，请耐心等待...');
			appletPhoneAuth(e.detail).then((res) => {
				this.fetchMemberProfile(res);
				this.getMemberDetail();
			});
		},
		// 获取会员档案
		fetchMemberProfile(res) {
			memberProfile(res).then((res) => {
				this.$modal.closeLoading();
				this.userInfo = res.data;
			});
		},
		// 获取会员资产
		getMemberDetail(res) {
			memberDetail(res).then((res) => {
				this.userDetail = res.data;
			});
		},
		// 请求店铺详情及位置
		getShopDetail() {
			uni.getLocation({
				type: 'wgs84',
				success: (res) => {
					const data = {
						lon: res.longitude,
						lat: res.latitude
					};
					shopDetail(data).then((res) => {
						this.shopInfo = res.data;
					});
				},
				fail: (res) => {
					if (this.$store.state.user.location) {
						this.modalUserLocation();
					}
				}
			});
		},
		// 用户定位授权弹窗
		modalUserLocation() {
			wx.showModal({
				title: '未打开小程序定位',
				content: '找不到您的位置，请开启定位。',
				confirmText: '开启定位',
				showCancel: true,
				success: (res) => {
					this.$store.commit('SET_LOCATION', false);
					if (res.confirm) {
						this.modalConfirm();
					} else if (res.cancel) {
						console.log('用户点击取消');
						shopDetail().then((res) => {
							this.shopInfo = res.data;
						});
					}
				},
				fail: (res) => {
					shopDetail().then((res) => {
						this.shopInfo = res.data;
					});
				}
			});
		},
		// 确认授权定位
		modalConfirm() {
			// 跳转授权页
			wx.openSetting({
				fail: function () {}
			});
		},
		// 取消授权定位
		modalCancel() {
			this.triggerEvent('cancel');
			console.log('用户未开启定位授权');
		},
		// 跳转到tabBar页面
		handleToTab() {
			this.$tab.switchTab('/pages/add-oil/index');
		},
		handleToTabShop() {
			this.$tab.switchTab('/pages/shop/index');
		},
		handelToNav(name) {
			this.$tab.navigateTo(`/pages/${name}/index`);
		},
		handelToSubNav() {
			this.$tab.navigateTo(`/pagesA/position/index`);
		},
		handleToInfo() {
			this.$tab.navigateTo(`/pages/mine/info/index`);
		}
	}
};
</script>

<style lang="scss" scoped>
.bg {
	background: $uni-page-bg;
}

.content {
	padding: 24rpx;
	padding-bottom: 0;
	min-height: 100vh;
	line-height: inherit;
	// background: linear-gradient(180deg, #1e60ff 0%, #1e60ff 100%);
	// background-image: url('https://5b0988e595225.cdn.sohucs.com/images/20180320/5b8ad998202649b780a74cacb0025ab9.jpeg');
	background-size: 100% 300rpx;
	background-repeat: no-repeat;
	width: 100%;
	background-attachment: fixed;
	backdrop-filter: blur(10px);
	.top-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 368rpx;
		filter: blur(3px);
		background: #f8f8f8;
		z-index: -1;
		.logo {
			width: 100%;
			height: 100%;
		}
	}

	// .box {
	// 	margin-top: -115rpx;
	// 	padding: 0 24rpx;
	// }

	.header-brand {
		margin-top: 50rpx;
	}

	.top-brand {
		// display: flex;
		// align-items: flex-end;
		padding: 24rpx;
		margin: 0 auto;
		background: #ffffff;
		box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(238, 238, 238, 0.5);
		border-radius: 24rpx;

		&-box {
			padding-bottom: 15rpx;
			height: 130rpx;
			border-bottom: 1px solid #eeeeee;
		}

		// &-address {
		//   padding-top: 20rpx;
		//   margin-top: 20rpx;
		// }

		&-positon {
			margin-top: 7rpx;
			font-size: 26rpx;
			color: #666666;
			text-align: center;
		}

		.logo {
			position: relative;
			top: -75rpx;
			height: 185rpx;
			width: 185rpx;
			max-width: 185rpx;
			min-width: 185rpx;
			border-radius: 20rpx;
		}

		&-info {
			// display: flex;
			// flex-direction: column;
			// justify-content: space-between;
			// align-items: flex-end;
			// flex-flow: wrap;
			// margin-bottom: 32rpx;
			// margin-right: 24rpx;
			// height: 185rpx;

			&__name {
				margin-top: 0;
				font-size: 36rpx;
				font-family: PingFang-SC-Heavy, PingFang-SC;
				font-weight: 800;
				color: #111111;
				line-height: 1;
			}

			&__desc {
				max-width: 470rpx;
				min-height: 67rpx;
				margin-top: 13rpx;
				margin-bottom: 10rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 1.24;
			}

			&__distance {
				color: #666666;
			}

			&__location {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				padding: 0 24rpx;
				height: 54rpx;
				background: linear-gradient(90deg, #00e4ff 0%, #1e60ff 100%);
				border-radius: 233rpx;
				box-sizing: border-box;

				&--icon {
					margin-right: 0;
					line-height: 1;
				}

				&--text {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #ffffff;
					line-height: 1;
				}
			}

			&__positon {
				// display: inline-flex;
				// align-items: center;
				// justify-content: center;
				// padding: 0 24rpx;
				// height: 55rpx;
				// width: 55rpx;
				// background: #ccc;
				border-radius: 50%;
				box-sizing: border-box;
				image {
					display: block;
					width: 64rpx;
					height: 64rpx;
				}

				&--icon {
					margin-right: 0;
					line-height: 1;
				}

				&--text {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #ffffff;
					line-height: 1;
				}
			}
			&__navation {
				font-size: 24rpx;
				margin-top: 6rpx;
				line-height: 1;
			}
		}
		&-foot {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			padding-top: 20rpx;
			padding-left: 0;
			border-top: 2rpx solid #eeeeee;
			&__item {
				margin-right: 32rpx;
				.icon {
					margin-right: 8rpx;
					width: 28rpx;
					height: 28rpx;
				}
				.text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 1;
				}
			}
		}
	}

	.userinfo-box {
		display: flex;
		padding: 24rpx;
		margin: 24rpx 0 22rpx;
		background: #ffffff;
		box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(238, 238, 238, 0.5);
		border-radius: 24rpx;

		.portrait-old {
			display: block;
			width: 180rpx;
			height: 180rpx;
		}

		.portrait {
			display: block;
			width: 200rpx;
			height: 200rpx;
		}

		.userinfo-box-right {
			margin-left: 20rpx;

			.no-login {
				display: flex;
				flex-direction: column;
				justify-content: center;
				height: 100%;

				.name {
					display: flex;
					align-items: center;
					line-height: 1;
					margin-bottom: 14rpx;

					.nickname {
						margin-right: 16rpx;
						font-size: 36rpx;
						font-family: PingFang-SC-Heavy, PingFang-SC;
						font-weight: 800;
						color: #111111;
					}

					.icon-member-level {
						width: 180rpx;
						height: 36rpx;
					}
				}

				.desc {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;

					.num {
						color: #1e60ff;
					}
				}
			}
		}
	}

	.nav {
		display: flex;
		align-items: center;
		position: relative;

		.point-login {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 9;
		}

		&-box {
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			width: 100%;
			height: 100%;

			// .link {
			//   display: flex;
			//   align-items: center;
			//   justify-content: center;

			//   .title {
			//     margin-right: 5rpx;
			//     font-size: 36rpx;
			//     font-family: PingFang-SC-Heavy, PingFang-SC;
			//     font-weight: 800;
			//     color: #1e60ff;
			//     line-height: 1;

			//     .small {
			//       font-size: 28rpx;
			//     }
			//   }

			//   &-forward {
			//     margin-top: 8rpx;
			//     line-height: 1;
			//   }
			// }

			// .icon {
			//   width: 140rpx;
			//   height: 140rpx;
			//   margin-left: 16rpx;
			// }

			// .label {
			//   margin: 24rpx 0 8rpx;
			//   font-size: 24rpx;
			//   font-family: PingFangSC-Regular, PingFang SC;
			//   font-weight: 400;
			//   color: #999999;
			//   line-height: 1;
			// }

			// .num {
			//   font-size: 36rpx;
			//   font-family: PingFang-SC-Heavy, PingFang-SC;
			//   font-weight: 800;
			//   color: #111111;
			//   line-height: 1;
			// }
		}

		&-left {
			position: relative;

			.bg {
				width: 702rpx;
				height: 288rpx;
				display: block;
			}

			.nav-box {
				// flex-direction: column;
				// justify-content: center;
				padding: 0;
				box-sizing: border-box;

				.icon {
					&-recharge {
						width: 176rpx;
						height: 176rpx;
						// margin-left: 22rpx;
						margin-left: 46rpx;
						margin-top: 64rpx;
					}
				}

				.link {
					display: block;
					.title {
						.label {
							margin: 60rpx 0 10rpx 0;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 1;
						}
						.num {
							margin-bottom: 25rpx;
							font-size: 36rpx;
							font-family: PingFang-SC-Heavy, PingFang-SC;
							font-weight: 800;
							color: #111111;
							line-height: 1;
						}
					}
				}

				.racharge-btn {
					position: relative;
					&-icon {
						width: 440rpx;
						height: 88rpx;
					}
					&-text {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						.left {
							margin-top: 12rpx;
							margin-left: 42rpx;
							margin-right: 70rpx;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #1e60ff;
							line-height: 32rpx;
						}
						.right {
							margin-top: 15rpx;
							font-size: 28rpx;
							font-family: PingFang-SC-Heavy, PingFang-SC;
							font-weight: 800;
							color: #ffffff;
							line-height: 1;
						}
					}
				}
			}
		}

		&-right {
			margin-left: 24rpx;

			&-top {
				position: relative;
				margin-bottom: 24rpx;

				.bg {
					width: 398rpx;
					height: 228rpx;
					display: block;
				}

				.nav-box {
					align-items: center;
				}
			}

			&-bottom {
				position: relative;

				.bg {
					width: 398rpx;
					height: 228rpx;
					display: block;
				}

				.nav-box {
					align-items: center;
				}
			}
		}
	}

	.oil-box {
		position: relative;
		display: flex;
		justify-content: center;
		margin-top: 36rpx;

		.point-login {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 9;
		}

		.oil-box-btn {
			width: 750rpx;
		}

		.oil-box-content {
			position: absolute;
			top: 0rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 600rpx;
			height: 136rpx;

			.icon {
				width: 56rpx;
				height: 56rpx;
				margin-right: 16rpx;
			}

			.text {
				font-size: 48rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #ffffff;
				line-height: 1;
				letter-spacing: 2rpx;
			}
		}
	}
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}

button.is-login {
	padding: 0;
	margin: 0;
	outline: inherit;
	min-height: inherit;
	line-height: 1;
	border: none;
	background-color: inherit;
}

button.is-login::after {
	padding: 0;
	border: none;
}
</style>
